import { presetTypography, presetUno } from 'unocss';
import UnoCSS from 'unocss/vite';
import { type UserConfig } from 'vite';

/**
 自执行函数表达式，也被称为立即调用函数表达式（Immediately Invoked Function Expression，IIFE），
 是一种将函数声明和函数调用结合在一起的 JavaScript 语法。这样可以将代码块作为参数传递给函数并立即执行，返回函数的执行结果。
*/
const commonConfig: (mode: string) => UserConfig = (mode) => ({
  /**
   * **************开发服务器配置****************
   */
  server: {
    /**
     *  如果将此设置为 0.0.0.0或者 true将监听所有地址
     */
    host: true,
    /**
     * 指定开发服务器端口,默认值5173
     */
    port: 8000,
    /**
     * 设置服务启动时是否自动打开浏览器
     */
    open: true,
    /**
     * 允许跨域
     */
    cors: true,
    /**
     * 是否开启 https
     */
    https: false,
    /**
     * 在生产中服务时的基本公共路径。
     * @default '/'
     */
    base: './',
  },

  esbuild: {
    drop: mode === 'production' ? ['console', 'debugger'] : [],
  },

  /**
   * *************项目构建配置**************
   */
  build: {
    /**
     * 设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
     */
    target: 'modules',
    /**
     * 构建得包名  默认：dist
     */
    outDir: 'dist',
    /**
     * 静态资源得存放路径文件名  assets
     */
    assetsDir: 'assets',
    /**
     * 构建后是否生成 source map 文件
     */
    sourcemap: false,
    /**
     * chunk 大小警告的限制（以 kbs 为单位）默认：500
     */
    chunkSizeWarningLimit: 500,
    /**
     * 防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
     */
    cssTarget: 'chrome61',
    /**
     * css代码拆分,禁用则所有样式保存在一个css里面
     */
    cssCodeSplit: true,
    /**
     * 启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
     */
    reportCompressedSize: true,
    /**
     * 项目压缩 :boolean | 'terser' | 'esbuild',默认为 Esbuild ，它比 terser 快 20-40 倍，压缩率只差 1%-2%。
     */
    minify: 'esbuild',

    /**
     * 会打包出 css js 等文件夹 目录显得清晰
     */
    rollupOptions: {
      // 限制在读取模块或写入块时并行打开的文件数量。默认值是20
      maxParallelFileOps: 20,
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
        // // 以函数方式配置拆分包
        // manualChunks(id) {
        //   // 静态资源分拆打包
        //   // if (id.includes('style.css')) {
        //   //   // 需要单独分割那些资源 就写判断逻辑就行
        //   //   return 'src/style.css'
        //   // }
        //   // if (id.includes('HelloWorld.vue')) {
        //   //   // 单独分割hello world.vue文件
        //   //   return 'src/components/HelloWorld.vue'
        //   // }
        //   // 最小化拆分包
        //   if (id.includes('node_modules')) {
        //     //pnpm时使用
        //     return id.toString().split('node_modules/')[1].split('/')[1].toString();
        //     //npm时使用
        //     //return id.toString().split('node_modules/')[1].split('/')[0].toString();
        //   }
        // },

        //以对象方式配置拆分包
        manualChunks: {
          vue: ['vue', 'pinia', 'vue-router'],
          antd: ['ant-design-vue', '@ant-design/icons-vue'],
        },
      },
    },
  },
  plugins: [
    UnoCSS({
      presets: [presetUno(), presetTypography()],
    }),
  ],
});

export { commonConfig };
